<template>
  <view class="workbench">
    <!-- 顶部背景区域 -->
    <view class="header-bg">
      <!-- 顶部导航栏 -->
      <view class="top-nav">
        <view class="nav-left">
          <u-icon name="list-dot" color="#ffffff" size="22"></u-icon>
          <text class="app-title">工作台</text>
        </view>
      </view>
    </view>
    <!-- 主要功能模块 -->
    <view class="modules-section">
      <view class="section-header">
        <text class="section-title">业务系统</text>
      </view>

      <!-- 公文流转系统 -->
      <view class="module-card document-system" @click="navigateToDocumentSystem">
        <view class="module-header">
          <view class="module-icon">
            <u-icon name="file-text" color="#79bbff" size="26"></u-icon>
          </view>
          <view class="module-info">
            <text class="module-title">公文流转系统</text>
            <text class="module-desc">发问管理、收文管理、审批流程</text>
          </view>
          <view class="module-arrow">
            <text class="arrow-text">›</text>
          </view>
        </view>
        <!-- <view class="module-stats">
          <view class="stat-mini">
            <text class="stat-mini-number">{{ documentStats.pending }}</text>
            <text class="stat-mini-label">待处理</text>
          </view>
          <view class="stat-mini">
            <text class="stat-mini-number">{{ documentStats.completed }}</text>
            <text class="stat-mini-label">已完成</text>
          </view>
        </view> -->
      </view>

      <!-- 员工请假管理系统 -->
      <view class="module-card leave-system" @click="navigateToLeaveSystem">
        <view class="module-header">
          <view class="module-icon">
            <u-icon name="calendar" color="#818cf8" size="26"></u-icon>
          </view>
          <view class="module-info">
            <text class="module-title">请假报备系统</text>
            <text class="module-desc">请假申请、审批、考勤管理</text>
          </view>
          <view class="module-arrow">
            <text class="arrow-text">›</text>
          </view>
        </view>
        <!-- <view class="module-stats">
          <view class="stat-mini">
            <text class="stat-mini-number-green">{{ leaveStats.pending }}</text>
            <text class="stat-mini-label">待审批</text>
          </view>
          <view class="stat-mini">
            <text class="stat-mini-number-green">{{ leaveStats.remaining }}</text>
            <text class="stat-mini-label">剩余假期</text>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { UserManager } from '@/utils/user'
import CustomTabBar from '@/custom-tab-bar/index.vue'

// 用户信息 - 使用 UserManager 获取完整用户信息
const userInfo = computed(() => {
  return UserManager.getFullUserInfo()
})

// 当前时间
const currentDate = ref('')
const currentTime = ref('')

// 问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了'
})

// 统计数据
const stats = ref({
  pendingCount: 0,
  completedCount: 0,
  urgentCount: 0,
})

// 公文流转系统统计
const documentStats = ref({
  pending: 0,
  completed: 0,
})

// 请假管理系统统计
const leaveStats = ref({
  pending: 0,
  remaining: 0,
})

// 最近活动
const recentActivities = ref<any[]>([])

// 更新当前时间
const updateTime = () => {
  const now = new Date()
  const month = now.getMonth() + 1
  const day = now.getDate()
  currentDate.value = `${month}月${day}日`
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 导航到公文流转系统
const navigateToDocumentSystem = () => {
  uni.navigateTo({
    url: '/pages/document/dashboard/index',
    fail: () => {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none',
      })
    },
  })
}

// 导航到请假管理系统
const navigateToLeaveSystem = () => {
  uni.navigateTo({
    url: '/pages/leave/index',
    fail: () => {
      uni.showToast({
        title: '请假首页打开失败',
        icon: 'none',
      })
    },
  })
}

// 查看所有活动
const viewAllActivities = () => {
  uni.showToast({
    title: '查看所有活动',
    icon: 'none',
  })
  // TODO: 实现具体的跳转逻辑
}

// 加载统计数据
const loadStats = async () => {
  try {
    const { getDashboardStatistics } = await import('@/Api/document')
    const response = await getDashboardStatistics()

    if (response.code === 200 && response.data) {
      // 公文流转系统统计
      documentStats.value = {
        pending: (response.data.todoCount || 0) + (response.data.receiveTodoCount || 0),
        completed: (response.data.draftCount || 0) + (response.data.receiveDraftCount || 0),
      }

      // 总体统计
      stats.value = {
        pendingCount: response.data.receiveTodoCount || 0,
        completedCount: response.data.todoCount || 0,
        urgentCount: 0,
      }
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 页面加载时初始化
// 页面显示时隐藏原生TabBar
onShow(() => {
  uni.hideTabBar({
    animation: false,
  })
})

onMounted(async () => {
  updateTime()
  // 每秒更新时间
  setInterval(updateTime, 1000)
  // 确保用户信息存在
  await UserManager.ensureUserInfo()
  // 加载统计数据
  await loadStats()
})
</script>

<style lang="scss" scoped>
.workbench {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 0;

  /* 顶部背景区域 */
  .header-bg {
    background-size: cover;
    background-position: center 80rpx;
    padding-top: 40px;
    margin-bottom: 40rpx;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a3582 0%, #1890ff 100%);

    // 添加轻微遮罩层
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(66, 133, 244, 0.05);
      opacity: 0.3;
    }
  }

  // 顶部导航
  .top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    position: relative;
    z-index: 2;

    .nav-left {
      display: flex;
      align-items: center;

      .app-title {
        font-size: 36rpx;
        font-weight: bold;
        color: white;
        letter-spacing: 1rpx;
        margin-left: 4px;
      }
    }

    .nav-right {
      .current-time {
        font-size: 28rpx;
        color: white;
        font-weight: 500;
      }
    }
  }

  // 用户信息区域
  .user-section {
    padding: 20rpx 32rpx 32rpx;
    display: flex;
    align-items: center;
    gap: 24rpx;
    position: relative;
    z-index: 2;

    .user-avatar {
      width: 96rpx;
      height: 96rpx;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3rpx solid rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10rpx);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

      .avatar-text {
        font-size: 36rpx;
        font-weight: bold;
        color: white;
      }
    }

    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6rpx;

      .greeting {
        font-size: 32rpx;
        font-weight: bold;
        color: white;
      }

      .user-dept {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }

  /* 快捷统计 */
  .stats-section {
    background: white;
    margin: 20rpx 32rpx;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

    .stats-grid {
      display: flex;
      gap: 24rpx;

      .stat-item {
        flex: 1;
        text-align: center;

        .stat-content {
          .stat-number {
            display: block;
            font-size: 48rpx;
            font-weight: bold;
            color: #4facfe;
            margin-bottom: 8rpx;
          }

          .stat-label {
            display: block;
            font-size: 26rpx;
            color: #666;
          }
        }
      }
    }
  }

  /* 主要功能模块 */
  .modules-section {
    padding: 0 32rpx 60rpx;

    .section-header {
      margin-bottom: 40rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        position: relative;
        padding-left: 20rpx;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 28rpx;
          background: linear-gradient(to bottom, #4facfe, #00f2fe);
          border-radius: 4rpx;
        }
      }
    }

    .module-card {
      background: white;
      border-radius: 20rpx;
      padding: 40rpx 32rpx;
      margin-bottom: 32rpx;
      box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:active {
        opacity: 0.85;
        transform: scale(0.98);
      }

      &.document-system {
        border-left: 6rpx solid #4facfe;
        background: linear-gradient(to right, rgba(79, 187, 255, 0.02) 0%, white 10%);

        .module-icon {
          background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
          box-shadow: 0 4rpx 12rpx rgba(79, 187, 255, 0.2);
        }
      }

      &.leave-system {
        border-left: 6rpx solid #818cf8;
        background: linear-gradient(to right, rgba(129, 140, 248, 0.02) 0%, white 10%);

        .module-icon {
          background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
          box-shadow: 0 4rpx 12rpx rgba(129, 140, 248, 0.2);
        }
      }

      .module-header {
        display: flex;
        align-items: center;

        .module-icon {
          width: 96rpx;
          height: 96rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 24rpx;
          flex-shrink: 0;
          transition: all 0.3s ease;

          .icon-text {
            font-size: 40rpx;
          }
        }

        .module-info {
          flex: 1;
          min-width: 0;

          .module-title {
            display: block;
            font-size: 34rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 12rpx;
            line-height: 1.4;
          }

          .module-desc {
            display: block;
            font-size: 26rpx;
            color: #666;
            line-height: 1.5;
            letter-spacing: 0.5rpx;
          }
        }

        .module-arrow {
          margin-left: 16rpx;
          flex-shrink: 0;

          .arrow-text {
            font-size: 40rpx;
            color: #ccc;
            font-weight: 300;
          }
        }
      }

      // 添加装饰性分隔线
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 92rpx;
        right: 32rpx;
        height: 1rpx;
        background: linear-gradient(to right, #e0e0e0 0%, transparent 100%);
      }

      &.document-system::after {
        background: linear-gradient(to right, rgba(79, 187, 255, 0.3) 0%, transparent 100%);
      }

      &.leave-system::after {
        background: linear-gradient(to right, rgba(129, 140, 248, 0.3) 0%, transparent 100%);
      }

      .module-stats {
        display: flex;
        gap: 32rpx;
        padding-left: 92rpx;

        .stat-mini {
          text-align: center;

          .stat-mini-number {
            display: block;
            font-size: 32rpx;
            font-weight: bold;
            color: #4facfe;
            margin-bottom: 6rpx;
          }

          .stat-mini-number-green {
            display: block;
            font-size: 32rpx;
            font-weight: bold;
            color: #818cf8;
            margin-bottom: 6rpx;
          }

          .stat-mini-label {
            display: block;
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }

  /* 最近活动 */
  .recent-section {
    padding: 0 32rpx 40rpx;

    .section-header {
      margin-bottom: 30rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        position: relative;
        padding-left: 20rpx;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 28rpx;
          background: linear-gradient(to bottom, #fa709a, #fee140);
          border-radius: 4rpx;
        }
      }

      .view-all {
        font-size: 26rpx;
        color: #4facfe;
      }
    }

    .activity-list {
      background: white;
      border-radius: 16rpx;
      overflow: hidden;

      .activity-item {
        display: flex;
        align-items: center;
        padding: 28rpx 24rpx;
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background: #f8f9fa;
        }

        .activity-content {
          flex: 1;

          .activity-title {
            display: block;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 8rpx;
          }

          .activity-desc {
            display: block;
            font-size: 24rpx;
            color: #999;
            margin-bottom: 6rpx;
          }

          .activity-time {
            display: block;
            font-size: 22rpx;
            color: #ccc;
          }
        }

        .activity-status {
          padding: 6rpx 16rpx;
          border-radius: 8rpx;
          font-size: 22rpx;
          font-weight: 500;
          flex-shrink: 0;

          &.pending {
            background: #fff8e1;
            color: #f57f17;
          }

          &.approved {
            background: #e8f5e9;
            color: #2e7d32;
          }

          &.completed {
            background: #e3f2fd;
            color: #1976d2;
          }

          .status-text {
            font-size: 22rpx;
          }
        }
      }
    }
  }
}
</style>
